.login-modal {
    width: 900px;
    position: relative;
    padding: 30px;
    margin: 60px auto;
    background: #fff;
    z-index: 100;

    .login-container {
        display: flex;
        height: 520px;

        .left-bg {
            width: 460px;
            height: 100%;
            position: relative;

            .title {
                position: absolute;
                bottom: 52px;
                width: 100%;
                text-align: center;
                font-size: 20px;
            }
        }

        .form-container {
            width: 460px;
            z-index: 100;
            background: #fff;
        }
    }
}

.login {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 100;
    overflow: hidden;
    width: 100%;
    height: 100%;
    background-image: url('../../assets/images/login-bg.jpg');
    background-size: cover;
    background-position: center;
}

.login-box {
    width: 920px;
    height: 500px;
    margin: 100px auto;
    overflow: hidden;
    border-radius: 8px;
    box-sizing: border-box;
    background-color: #fff;
    box-shadow: 0 5px 15px 0 rgba(0, 0, 0, .15);

    &:hover {
        -webkit-transform: translateY(-1px);
        -moz-transform: translateY(-1px);
        -ms-transform: translateY(-1px);
        transform: translateY(-1px);
    }

    header {
        height: 130px;
        background: url(../../assets/images/login-header.jpg) no-repeat 100%;
        background-size: 100% 100%;
        position: relative;

        .logo {
            width: 64px;
            height: 39px;
            margin-top: 50px;
            margin-left: 198px;
        }
    }

    .slogen {
        width: 100%;
        padding: 20px 0;
        font-size: 24px;
        font-weight: 700;
        text-align: center;
        background-color: #4a4f5d;
        background-repeat: repeat-x;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-image: linear-gradient(to top, #4a4f5d, #191b20);
        background-image: -o-linear-gradient(to top, #4a4f5d, #191b20);
        background-image: -ms-linear-gradient(to top, #4a4f5d, #191b20);
        background-image: -moz-linear-gradient(to top, #4a4f5d, #191b20);
        background-image: -webkit-linear-gradient(to top, #4a4f5d, #191b20);
    }

    .login-form {
        margin-top: 10px;
        padding-left: 70px;

        input {
            width: 320px;
            height: 40px;
            padding: 9px 14px;
            box-sizing: border-box;
            border-radius: 3px;
            font-size: 14px;
            line-height: 40px;
            color: #333;
            outline: none;
            -moz-appearance: textfield;

            &::-webkit-input-placeholder {
                color: #999;
                font-size: 12px
            }

            &:-ms-input-placeholder {
                color: #999;
                font-size: 12px
            }

            &::placeholder {
                color: #999;
                font-size: 12px
            }

            &::-webkit-inner-spin-button,
            input::-webkit-outer-spin-button {
                -webkit-appearance: none
            }

        }

        .captcha {
            display: -ms-flexbox;
            display: flex;

            .captcha-number {
                width: 190px;
            }

            input {
                width: 190px;
                outline: none;
            }

            button {
                -ms-flex-negative: 0;
                flex-shrink: 0;
                width: 114px;
                background-color: #f70;
                height: 40px;
                border: none;
                outline: none;
                text-align: center;
                border-radius: 3px;
                color: #fff;
                margin-left: 16px;
                font-size: 12px;
                cursor: pointer;
                box-shadow: none;

                &.disable {
                    background-color: #cacaca
                }
            }
        }
    }


    .login-btn {
        position: relative;
        display: block;
        margin: 0 auto;
        width: 190px;
        height: 40px;
        line-height: 20px;
        border: none;
        outline: none;
        border-radius: 18px;
        font-size: 14px;
        text-align: center;
        margin-top: 60px;
        margin-left: 70px;
        box-shadow: 0 6px 18px 0 rgba(255, 103, 0, .3);
        background: linear-gradient(45deg, #ff6700 0, #ffa000 100%);
        color: #fff;
        cursor: pointer;

        &:after {
            content: '';
            display: block;
            width: 8px;
            height: 8px;
            border-top: 2px solid;
            border-right: 2px solid;
            border-color: rgba(255, 255, 255, .3);
            position: absolute;
            border-radius: 0 100% 0 0;
            right: 5px;
            top: 5px
        }
    }
}

#index-first-page {
    width: 100%;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;

    #index-first-banner {
        position: relative;
        width: 1180px;
        height: 1000px;
        display: -webkit-box;
        display: flex;
        -webkit-box-pack: center;
        justify-content: center;
        opacity: 1;
        margin: 0 auto;
    }

    .index_banner_bg {
        position: absolute;
        top: 0;
        left: 0;

        img {
            width: 100%;
            max-height: 915px;
            min-height: 610px
        }
    }

    .index_animation_fast {
        position: absolute;
        top: 50%;
        left: 13%;
        text-align: right;
        -webkit-animation: upAndDownFast 2s ease-in-out infinite alternate;
        animation: upAndDownFast 2s ease-in-out infinite alternate
    }

    .index_animation_slow {
        position: absolute;
        top: 30%;
        left: 1%;
        -webkit-animation: upAndDownSlow 2s ease-in-out infinite alternate;
        animation: upAndDownSlow 2s ease-in-out infinite alternate
    }
}

@media screen and(max-width:1149) {
    .index-page-block {
        font-size: 14px;

        .first-page-pic {
            height: 338px !important
        }

        #index-first-banner {
            padding-top: 100px !important;
            height: 570px !important
        }
    }
}

@-webkit-keyframes upAndDownFast {
    0% {
        top: 50%
    }

    to {
        top: 46%
    }
}

@keyframes upAndDownFast {
    0% {
        top: 50%
    }

    to {
        top: 46%
    }
}

@-webkit-keyframes upAndDownSlow {
    0% {
        top: 30%
    }

    to {
        top: 32%
    }
}

@keyframes upAndDownSlow {
    0% {
        top: 30%
    }

    to {
        top: 32%
    }
}

.comFranmes {
    -webkit-animation: mymove 1s 1;
    animation: mymove 1s 1
}
